<template>

  <el-dialog title="查看订单" :visible.sync="dialogVisible" :close-on-click-modal="false">

    <el-tabs v-model="activeName" type="card" @tab-click="handleToggle">
      <el-tab-pane label="基础信息" name="base">
        <el-form ref="main-form" :model="form" label-width="120px" :inline="true" >
          <el-form-item label="商户号" size="mini">
            <el-input placeholder="" :value="form.mchNo" readonly></el-input>
          </el-form-item>

          <el-form-item label="平台订单号" size="mini">
            <el-input placeholder="" :value="form.tradeNo" readonly></el-input>
          </el-form-item>

          

          <el-form-item label="商户单号" size="mini">
            <el-input placeholder="" :value="form.orderNo" readonly></el-input>
          </el-form-item>

          <el-form-item label="商户交易金额" size="mini">
            <el-input placeholder="" :value="form.mchTransCurrency + ' ' + form.mchTransAmount / 100" readonly></el-input>
          </el-form-item>

          <el-form-item label="结算金额" size="mini">
            <el-input placeholder="" :value="form.settleCurrency + ' ' + form.settleAmount / 100" readonly></el-input>
          </el-form-item>

          <el-form-item label="交易时间" size="mini">
            <el-input placeholder="" :value="form.mchTransTime" readonly></el-input>
          </el-form-item>

          <el-form-item label="手续费" size="mini">
            <el-input placeholder="" :value="form.serviceFee / 100" readonly></el-input>
          </el-form-item>

          <el-form-item label="单笔手续费" size="mini">
            <el-input placeholder="" :value="form.perFee / 100" readonly></el-input>
          </el-form-item>

          <el-form-item label="保证金" size="mini">
            <el-input placeholder="" :value="form.bondAmount / 100" readonly></el-input>
          </el-form-item>

          <el-form-item label="交易状态" size="mini">
            <el-input placeholder="" :value="form.strTransStatus" readonly></el-input>
          </el-form-item>

         

          <el-form-item label="拒付状态" size="mini">
            <el-input placeholder="" :value="form.strIsDis" readonly></el-input>
          </el-form-item>

          <el-form-item label="拒付状态" size="mini">
            <el-input placeholder="" :value="form.strIsDis" readonly></el-input>
          </el-form-item>

          <el-form-item label="退款状态" size="mini">
            <el-input placeholder="" :value="form.strIsRefund" readonly></el-input>
          </el-form-item>

          <el-form-item label="退款金额" size="mini">
            <el-input placeholder="" :value="form.mchTransCurrency + ' ' + form.refundAmount / 100" readonly></el-input>
          </el-form-item>

          <el-form-item label="冻结状态" size="mini">
            <el-input placeholder="" :value="form.strIsFrozen" readonly></el-input>
          </el-form-item>

          <el-form-item label="冻结金额" size="mini">
            <el-input placeholder="" :value="form.mchTransCurrency + ' ' + form.frozenAmount / 100" readonly></el-input>
          </el-form-item>
        </el-form>
      </el-tab-pane>




    </el-tabs>

    <div slot="footer" class="dialog-footer">
      <el-button @click="close" size="small">关闭</el-button>
    </div>

  </el-dialog>
</template>

<script>

import ApiMain from '@/api/trade.detail';
import MailApiMain from '@/api/email.log';

export default {
  mixins: [
  ],
  props: [
  ],
  data () {
    return {

      dialogVisible: false,
      popDeleteVisible: false,
      loading: false,

      activeName: 'base',
      form: {},

      id  : null,
      data: null,
      mailData: []

    }
  },
  mounted () {
  },

  methods: {

    show (id = null) {

      this.id = id;

      this.activeName = 'base';
      this.mailData = [];
      this.fetchData();

      this.dialogVisible = true;
    },

    close () {
      this.dialogVisible = false;
      this.$emit('dialog-close');
    },

    fetchData () {

      ApiMain.info({id: this.id})
      .then(re => {
        this.data = re;
        this.renderData();
        console.log('then'); 
      })
      // .catch(() => {
      //   this.data = null;
      // })
      // .finally(() => {
      //   this.renderData();
      // });
    },

    renderData () {
      console.log('renderData', this.data);
      if (!this.data) {
        return
      }
      this.form = this.data
      console.log(this.form);
    },

    handleToggle () {
      if (this.activeName == 'mail') {
        MailApiMain.list({ page: 1, limit: 20, search: { tradeId: this.id } })
        .then(re => {
          this.mailData = re.list; 
        })
      }
    }

  }
}
</script>

<style>

</style>
